<template>
    <div class="box" v-if="store.isClick">
        <span>年份切换 : </span>
        <el-select @change="updateYear" v-model="store.selectedYear" placeholder="Select" style="width: 140px">
            <el-option v-for="year in store.availableYears" :key="year" :value="year" />
        </el-select>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { functionNav } from '@/Hooks/functionHook';
import { rainy } from '@/Hooks/rainyHook';
import { sun } from '@/Hooks/sunHook';
import { PM_city } from '@/Hooks/pmHook';
import { extra } from '@/Hooks/extraHook';
import { mapStore } from '@/stores/counter';

const store = mapStore()
const { renderTemp } = functionNav()
const { renderRainy } = rainy()
const { renderSun } = sun()
const { renderPM } = PM_city()
const { renderGDP } = extra()


const updateYear = () => {
    if (store.isTemp) {
        renderTemp()
    } else if (store.isRainy) {
        renderRainy()
    } else if (store.isSun) {
        renderSun()
    } else if (store.isPM) {
        renderPM()
    } else if (store.isGDP) {
        renderGDP()
    }

}
</script>

<style scoped lang="scss">
.box {
    position: fixed;
    bottom: 50px;
    right: 0px;
    width: 300px;
    z-index: 1000;

    span {
        color: #fff;
        font-size: 16px;
    }
}
</style>
